<template>
  <div>
    <!-- <h1>{{ msg }}</h1> -->
    <son>
      <!-- 无名插槽 -->
      <h1>{{ msg }}</h1>
      <ul>
        <li>将组件标签中的所有内容都，子组件中的slot</li>
      </ul>
      <hr />
      <!-- 具名插槽 -->
      <h1 slot="msg">{{ msg }}</h1>
      <ul slot="jianqing">
        <li>洋洋很帅很可爱，石松峰非常喜欢他</li>
      </ul>
    </son>
    <hr />
    <zuo-yong-yu-slot>
      <template slot-scope="obj">
        <div>
          <h1>{{ obj }}</h1>
        </div>
      </template>
      <template slot="zuoyongyu1" slot-scope="test1">
        <div>
          <h1>{{ test1 }}</h1>
        </div>
      </template>
    </zuo-yong-yu-slot>
  </div>
</template>

<script>
import Son from "./components/Son.vue";
import ZuoYongYuSlot from "./components/ZuoYongYuSlot";
export default {
  data() {
    return {
      msg: "开启震动模式",
    };
  },
  components: {
    Son,
    ZuoYongYuSlot,
  },
};
</script>

<style lang="scss" scoped>
</style>